<template>
    <a-card :bordered="false">
        <div class="table-operator">
            <a-button shape="round" size="small" type="primary" icon="plus" @click="handleEdit({},'pageEdit','新增')">添加</a-button>

            <a-upload :before-upload="beforeUpload" :file-list="fileList"
                accept=".txt">
                <div>
                    <a-button type="primary" shape="round" size="small"> <a-icon type="upload" />页面导入</a-button>
                </div>
            </a-upload>

        </div>

        <LTable
            ref="pageList"
            size="small"
            rowKey="keyId"
            :formAttributes="formAttributes"
            :columns="columns"
            axiosUrl="/SysPageController/page"
            :showPagination="true"
            :showQueryForm="true"
            :initOrder="[{field:'createTime',val:'desc'}]"
            :initQuery="[{field:'systemNo',val:defaultSettings.systemNo}]"
        >
        
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record,'pageEdit',record.pageName)">编辑</a>
          <a-divider type="vertical" />
          <a @click="pageDel(record.keyId)">删除</a>
          <a-divider type="vertical" />
          <a @click="pageClone(record.keyId)">复制</a>
          <a-divider type="vertical" />
          <a @click="pageExport(record)">导出</a>
        </span>
        
    </LTable>
    <pageEdit ref="pageEdit" @close="refresh('pageList')" @ok="refresh('pageList')"></pageEdit> 
    </a-card>
</template>

<script>
import LTable from '@/components/lt/LTable'
import { Modal } from 'ant-design-vue'
import pageEdit from './pageEdit'
import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'
import request from '@/utils/request'

export default {
    name:'roleList',
    components:{
       LTable,pageEdit
    },
    mixins:[SysMixin],
    data(){
        return{
            defaultSettings,
            formAttributes:[
                {field:'pageName',label:'页面名称',component:'input',condition:'like'},
                {field:'keyId',label:'页面编号',component:'input',condition:'like'},
            ],
            columns:[
               
                {
                    title: '系统编号',
                    dataIndex: 'systemNo'
                },
                {
                    title: '页面编号',
                    dataIndex: 'keyId'
                    
                },
                {
                    title: '页面名称',
                    dataIndex: 'pageName'
                },
                
                {
                    title:'创建时间',
                    dataIndex:'createTime'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: '180px',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            fileList:[]
        }
    },
    created(){
       
    },
    methods:{
        pageDel(keyId){
            Modal.confirm({
                title: "系统提醒",
                content: "确定删除？",
                onOk: () => {
                    this.handleDelete({keyId:keyId},'/SysPageController/del','pageList')
                },
                onCancel () {}
            })
            
        },
        pageClone(keyId){
             Modal.confirm({
                title: "系统提醒",
                content: "确定复制？",
                onOk: () => {
                    request.get('/SysPageController/clone',{params:{keyId:keyId}}).then((res)=>{
                        if (res.success) {
                            this.$message.success(res.message);
                            this.refresh('pageList');
                        } else {
                            this.$message.warning(res.message);
                        }
                    })
                },
                onCancel () {}
            })
        },
        pageExport(record){

            const link = document.createElement("a");
            let blob = new Blob([JSON.stringify(record)], { type: "multipary/form-data" });
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            link.setAttribute("download",'page'+record.keyId+'.txt');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        beforeUpload(file) {
            if(file.type!="text/plain"){
               this.$message.warning("只能选择TXT文件");
               return false
            }
            this.fileList = [...this.fileList, file];
            this.upload()
            return false
        },
        upload(){
            const formData = new FormData();
            formData.append('file', this.fileList[0]);
            this.confirmLoading = true;
            request({url: '/SysPageController/pageImport',method: 'post',data: formData}).then((res)=>{
                    if(res.success){   
                        this.$message.success(res.message);
                    }else{
                        this.$message.warning(res.message);
                    }
                }).finally(() => {
                    this.fileList=[]
                })
        }

        
    }
}
</script>